<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>6.一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype 
				为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//定义School组件
			let School = Vue.extend({
				name:'School',
				template:`
					<div>
						<h2>学校名称：{{name}}</h2>	
						<h2>学校地址：{{address}}</h2>
						<button @click="changeName">修改学校名称</button>	
					</div>
				`,
				data(){
					return{
						name:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					changeName(){
						console.log('#',this.a)
						this.name = 'atguigu'
					}
				}
			})
			
			//定义一个Student组件
			let Student = Vue.extend({
				name:'Student',
				template:`
					<div>
						<h2>学生姓名：{{name}}</h2>
						<h2>学生年龄：{{age}}</h2>
						<button @click="incrementAge">年龄+1</button>
					</div>
				`,
				data(){
					return {
						name:'张三',
						age:18
					}
				},
				methods:{
					incrementAge(){
						this.age += 1
					}
				},
			})

			//定义App
			let App = Vue.extend({
				template:`
					<div>
						<School/>	
						<Student/>	
					</div>
				`,
				components:{School,Student}
			})

			//创建vm
			let vm = new Vue({
				el:'#demo',
				template:'<App/>',
				components:{App}
			})
			
		</script>
	</body>
</html>